<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lk
 * @LastEditTime: 2022-01-10 23:52:29
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" style="height: 95%"></div>
</template>
<script>
import { Line } from '@antv/g2plot';

export default{
mounted(){
 this.initChat();
},
methods:{
   initChat(){
     const data = [
  { "year": "2004","value": 124,"category": "太原市"},
  { "year": "2004","value": 46,"category": "晋中市"},
  { "year": "2004","value": 86,"category": "阳泉市"},
  { "year": "2008","value": 665,"category": "太原市"},
  { "year": "2008","value": 469,"category": "晋中市"},
  { "year": "2008","value": 251,"category": "阳泉市"},
  { "year": "2014","value": 2256,"category": "太原市"},
  { "year": "2014","value": 1734,"category": "晋中市"},
  { "year": "2014","value": 1358,"category": "阳泉市"},
  { "year": "2018","value": 3164,"category": "太原市"},
  { "year": "2018","value": 2467,"category": "晋中市"},
  { "year": "2018","value": 1976,"category": "阳泉市"},
  { "year": "2020","value": 6457,"category": "太原市"},
  { "year": "2020","value": 4613,"category": "晋中市"},
  { "year": "2020","value": 5435,"category": "阳泉市"},
];
const line = new Line(this.$refs.left1_container, {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
    });

    line.render();
}
}
}
</script>
